<template>
  <div class="login">
    <div class="top">
      <div class="X" @click="$router.go(-1)"></div>
      <span class="text1" @click="btnCode">绑定邀请码</span>
    </div>

    <div class="main">
      <div class="box1"></div>
      <span class="text2">130****0301</span>
      <div class="box2">
        <span class="text3" @click="btnHome">一键登录</span>
      </div>
      <div class="box3">
        <span class="text4">中国联通提供认证服务</span>
      </div>
      <div class="box4">
        <span class="text5" @click="btnPhone">切换手机号登录</span>
        <img
          class="image_1"
          referrerpolicy="no-referrer"
          src="https://lanhu.oss-cn-beijing.aliyuncs.com/psnujpytmgl7nm43pze3cu8hqpvqukyeekg54cfcc50-d71b-4c0d-a6b3-2db6131de7eb"
        />
        <span
          class="text6"
          @click="btnqita"
          >其他方式登录</span
        >
      </div>
    </div>

    <div class="bottom">
      <van-checkbox
        v-model="checked"
        checked-color="#ee0a24"
        icon-size="14px"
        class="checkbox"
      ></van-checkbox>
      <div class="text7" @click="btnService">
        <span class="text8">同意</span>
        <span class="text9">中国联通服务与隐私协议条款</span>
        <span class="text10">和</span>
        <span class="text11">《用户保护协议》</span>
        <span class="text12">、<br /></span>
        <span class="text13">《隐私保护政策》</span>
        <span class="text14">并授权美悦医美获得本机号码</span>
      </div>
    </div>

    <!-- 遮罩 -->
    <div class="zhezhao" v-show="isShow"></div>
    <!-- 弹窗 -->
    <div class="tc1" v-show="isShow">
      <div class="tctop" @click="btnshow">
        <img
          src="https://lanhu.oss-cn-beijing.aliyuncs.com/psadv8l3qrgoml8yaoexpd7o5z33mcsy14b144c087-7d82-431e-a10d-f471fd146aac"
          alt=""
        />
      </div>
      <div class="tccenter">
        <img
          src="https://lanhu.oss-cn-beijing.aliyuncs.com/psvyq5iikh79t3j07xnfj26ylu6nwsumr83cf482d-ed6d-4aca-ab70-0a10396b8044"
          alt=""
        />
        <div class="duigou">
          <div class="duigou1"></div>
        </div>
      </div>
      <div class="tcmain">
        <input type="text" placeholder="请输入邀请码（选填）" />
      </div>
      <div class="tcbottom">
        <button @click="isShow = false">确认</button>
      </div>
    </div>

    <!-- 其他登陆方式 -->
    <van-action-sheet v-model="loginshow" title="登陆">
      <div class="content">
        <van-cell @touchstart.native.stop="show = true"><input type="text" placeholder="请输入电话号码" class="ipt1" v-model="input1"/></van-cell>
      </div>
      <div class="content">
        <van-cell @touchstart.native.stop="show = true"><input type="text" placeholder="获取验证码" class="ipt2" v-model="input2"/></van-cell>
      </div>
      <div class="weixin">
        <img
          src="./1.png"
          alt=""
        />
        <span>微信快捷登陆</span>
      </div>
      <p class="bangding">绑定邀请码</p>

      <!-- 数字键盘 -->
      <van-number-keyboard
        :show="show"
        @blur="show = false"
        @input="onInput"
        @delete="onDelete"
      />
    </van-action-sheet>
  </div>
</template>

<script>
import { Toast } from 'vant';
export default {
  data() {
    return {
      checked: false,
      isShow: false,
      loginshow: false,
      show : false,
      input1 : "",
      input2 : ""
    };
  },
  methods: {
    btnService() {
      this.$router.push("/service");
    },
    btnCode() {
      this.isShow = true;
    },
    btnshow() {
      this.isShow = false;
    },
    btnqita() {
      this.loginshow = true;
    },
    onInput(value) {
      // Toast(value);
      this.input1 =this.input1 + value
    },
    onDelete() {
      Toast('删除');
    },
    btnPhone(){
      this.$router.push("/phone")
    },
    btnHome(){
      if(this.checked === true){
        this.$router.push("/Home")
      }
    }
  },
};
</script>

<style lang="scss" scoped>
.login {
  width: 100%;
  height: 1330px;
  position: relative;

  .top {
    width: 85%;
    height: 28px;
    margin: auto;
    position: absolute;
    top: 50px;
    left: 50px;
    // background-color: #bbb;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .X {
      width: 28px;
      height: 28px;
      background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/psnbetsaayytsgz9biv2fxtdauan71f5rvr8d2f6261-e9cd-4960-b4a2-8d12d4280f7b)
        0px -1px no-repeat;
      background-size: 29px 29px;
    }

    .text1 {
      width: 129px;
      height: 26px;
      color: rgba(247, 64, 95, 1);
      font-size: 26px;
      font-family: PingFangSC-Semibold;
      text-align: center;
      white-space: nowrap;
      line-height: 26px;
      font-weight: 600;
    }
  }

  .main {
    width: 100%;
    height: 800px;
    // background-color: aqua;
    text-align: center;
    position: absolute;
    top: 150px;

    .box1 {
      background-color: rgba(247, 64, 95, 1);
      border-radius: 52px;
      width: 336px;
      height: 335px;
      margin: 0 auto 40px;
    }

    .text2 {
      color: rgba(51, 51, 51, 1);
      font-size: 40px;
      font-family: PingFangSC-Semibold;
    }

    .box2 {
      background-color: rgba(247, 64, 95, 1);
      border-radius: 51px;
      height: 102px;
      width: 582px;
      margin: 20px auto;

      .text3 {
        line-height: 102px;
        color: rgba(254, 254, 254, 1);
        font-size: 30px;
        font-family: PingFangSC-Medium;
        text-align: center;
      }
    }

    .box3 {
      width: 310px;
      margin: 10px auto;

      .text4 {
        color: rgba(153, 153, 153, 1);
        font-size: 20px;
        font-family: PingFangSC-Medium;
      }
    }

    .box4 {
      margin: 50px auto 0;

      .text5 {
        color: rgba(102, 102, 102, 1);
        font-size: 26px;
        font-family: PingFangSC-Medium;
      }

      .image_1 {
        width: 1px;
        height: 24px;
        margin: 1px 0 0 25px;
      }

      .text6 {
        color: rgba(102, 102, 102, 1);
        font-size: 26px;
        font-family: PingFangSC-Medium;
        margin-left: 24px;
      }
    }
  }

  .bottom {
    width: 100%;
    height: 100px;
    position: absolute;
    bottom: 0;
    // background-color: aqua;
    display: flex;
    // justify-content: space-around;
    // align-items: center;
    // align-content: center;

    .checkbox {
      margin: 0 30px 30px 80px;
    }

    .text7 {
      flex: 1;
      height: 60px;
      line-height: 40px;

      .text8 {
        color: rgba(153, 153, 153, 1);
        font-size: 22px;
        font-family: PingFangSC-Regular;
      }

      .text9 {
        color: rgba(247, 64, 95, 1);
        font-size: 22px;
        font-family: PingFangSC-Regular;
      }

      .text10 {
        color: rgba(153, 153, 153, 1);
        font-size: 22px;
        font-family: PingFangSC-Regular;
      }

      .text11 {
        color: rgba(247, 64, 95, 1);
        font-size: 22px;
        font-family: PingFangSC-Regular;
      }

      .text12 {
        color: rgba(153, 153, 153, 1);
        font-size: 22px;
        font-family: PingFangSC-Regular;
      }

      .text13 {
        color: rgba(247, 64, 95, 1);
        font-size: 22px;
        font-family: PingFangSC-Regular;
      }

      .text14 {
        color: rgba(153, 153, 153, 1);
        font-size: 22px;
        font-family: PingFangSC-Regular;
      }
    }
  }

  // 遮罩
  .zhezhao {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
    background-color: rgba(102, 102, 102, 0.5);
  }

  // 弹窗
  .tc1 {
    background-color: rgba(255, 255, 255, 1);
    border-radius: 20px;
    width: 608px;
    height: 508px;
    position : fixed;
    top: 550px;
    left: 70px;
    z-index: 2;
  }

  .tctop {
    background-color: rgb(198, 192, 192);
    border-radius: 50%;
    height: 30px;
    width: 30px;
    margin: 20px 0 20px 540px;
    display: flex;
    align-items: center;
    img {
      width: 17px;
      height: 17px;
      margin: 15px 0 13px 7px;
    }
  }

  .tccenter {
    width: 100%;
    height: 127px;
    margin: 3px 0 0 268px;
    img {
      width: 72px;
      height: 112px;
    }
    .duigou {
      background-color: rgba(247, 64, 95, 1);
      border-radius: 50%;
      height: 50px;
      width: 50px;
      margin: -82px 0 0 50px;
      .duigou1 {
        width: 50px;
        height: 50px;
        background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/psxe6zsie3gm4msohcuf25thfb0a7wkmue3070882e-de2c-4738-b4ab-bee63d02453f)
          13px 13px no-repeat;
        background-size: 26px 17px;
      }
    }
  }

  .tcmain {
    width: 80%;
    height: 127px;
    // background-color: rgb(86, 74, 110);
    margin: 40px auto 0;
    input {
      width: 100%;
      height: 70%;
      border-radius: 44px;
      font-size: 29px;
      text-align: center;
      border: 1px #bbb solid;
    }
  }

  .tcbottom {
    width: 80%;
    height: 127px;
    // background-color: rgb(76, 72, 72);
    margin: auto;
    button {
      width: 100%;
      height: 70%;
      border-radius: 44px;
      border: 1px #bbb solid;
      background-color: rgba(247, 64, 95, 1);
      font-size: 29px;
      text-align: center;
      color: white;
    }
  }

  // 其他登陆方式
  .van-popup--bottom.van-popup--round {
    width: 100%;
    height: 80%;
  }
  .van-action-sheet__header {
    font-weight: 600;
  }
  .content {
    margin: auto;
    width: 83%;
    input {
      width: 100%;
      height: 80px;
      font-size: 29px;
      border-radius: 40px;
      border: 1px solid #bbb;
    }
    .ipt1 {
      background-color: rgb(236, 244, 247);
      text-indent: 30px;
      font-weight: 600;
    }
    .ipt2 {
      background-color: #aaa;
      text-align: center;
    }
  }
  .weixin {
    width: 80%;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 29px;
    img {
      width: 40px;
      height: 40px;
      margin-right: 20px;
    }
    span {
      font-weight: 600;
    }
  }
  .bangding {
    font-size: 29px;
    text-align: center;
    color: rgba(247, 64, 95, 1);
    margin-top: 10px;
  }
}
</style>
